/**
 * 1. class的基本用法 继承 和 类型约束 implements
 * 2. class的修饰符
 *    readonly(只读，不允许修改)
 *    private(私有属性，只能内部调用)
 *    protected(给子类和内部调用，外部无法使用)
 *    public(默认)
 * 3. super原理
 *    父类的prototype.constructor.call
 *    可以调用父类的所有属性/方法
 *    可以给父类的constructor传参
 * 4. 静态方法 static
 *    不用new 直接Class.xxx
 *    切静态方法里面的this只能访问到静态属性
 * 5. get set
*/
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
// 虚拟dom 简单版
var Dom = /** @class */ (function () {
    function Dom() {
    }
    // 创建节点的方法
    Dom.prototype.createElement = function (el) {
        return document.createElement(el);
    };
    // 填充文本的方法
    Dom.prototype.setText = function (el, text) {
        el.textContent = text;
    };
    // 渲染函数
    Dom.prototype.render = function (data) {
        var _this = this;
        var root = this.createElement(data.tag);
        if (data.text) {
            this.setText(root, data.text);
        }
        if (data.children && Array.isArray(data.children)) {
            data.children.forEach(function (item) {
                var child = _this.render(item);
                root.appendChild(child);
            });
        }
        return root;
    };
    return Dom;
}());
var Vue = /** @class */ (function (_super) {
    __extends(Vue, _super);
    function Vue(options) {
        var _this = _super.call(this) || this;
        _this.options = options;
        _this.init();
        return _this;
    }
    Vue.prototype.init = function () {
        // 虚拟dom 就是通过js去渲染我们这个真实dom
        var data = {
            tag: 'div',
            children: [
                {
                    tag: 'section',
                    text: '我是子节点1'
                },
                {
                    tag: 'section',
                    text: '我是子节点2'
                },
                {
                    tag: 'section',
                    text: '我是子节点3',
                    children: [
                        {
                            tag: 'span',
                            text: '我是子节点3-1'
                        }
                    ]
                }
            ]
        };
        var app = document.querySelector(this.options.el);
        app === null || app === void 0 ? void 0 : app.appendChild(this.render(data));
    };
    return Vue;
}(Dom));
new Vue({
    el: '#app'
});
